<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		ul{
			list-style: none;
		}
		li:nth-of-type(2n){
			background-color: red;
		}
		li:nth-of-type(2n+1){
			background-color: green;
		}
	</style>
</head>
<body>
	<ul>
		<li>a</li>
		<li>a</li>
		<li>a</li>
		<li>a</li>
	</ul>

但凡需要索引的问题，都要注意
	<script type="text/javascript">
		function test(){
			var liCollection = document.getElementsByTagName('li');
			for(var i = 0; i < liCollection.length; i ++){
				liCollection[i].onclick = function (){
					console.log(i);
				}
			}
		}

		test();
	</script>

	<script type="text/javascript">
		function test(){
			var li = document.getElementsByTagName('li');
			for(var i = 0; i < li.length; i ++){
				(function(j){
					li[i].onclick = function(){
						console.log(j)
					}
				}(i))
			}
		}
		test();
	</script>
</body>
</html>

使用原生js,addEventlistener,给每个li元素绑定一个click事件，输出他们的顺序